<template id="successfulTrade">
    <div>
        <div class="successfulTrade_top">
            <h3>订单详情</h3>
            <img src="../image/dayu.jpg" alt="" @click="getSuccessfulTrade">
        </div>
        <p class="successfulTrade_p"></p>
        <p class="successfulTrade_good">商品信息</p>
        <div class="successfulTrade_list">
            <ul>
                <li v-for="v in info.goods"><img v-bind:src="v.goods_thumb" alt=""></li>
            </ul>
            <span>共{{info.num}}件<time>></time></span>
        </div>
        <p class="successfulTrade_good">订单信息</p>
        <div class="successfulTrade_idea">
            <p>订单编号:{{info.order_sn}}<span>复制</span></p>
            <p>交易流水:{{info.order_pay_sn}}</p>
            <p>创建时间:{{info.add_time}}</p>
            <p>付款时间:{{info.pay_time}}</p>
            <p>快递单号:{{info.invoice_no}}</p>
        </div>
        <p class="successfulTrade_p"></p>
        <p class="successfulTrade_good">结算信息</p>
        <div class="successfulTrade_trade">
             <p>商品总价<span>¥{{info.goods_amount}}</span></p>
			 <p>优惠券抵扣<img src="../image/juan.jpg" alt=""><span>-¥{{info.bonus}} <time></time></span></p>
			
            <p>商品实付<span>¥{{info.order_amount}} <time></time></span></p>
            <p>运费<span>{{info.shipping_fee}}</span></p>
            <p>发票<span>{{info.inv_payee_tips}}</span></p>
            <p><span>合计:¥{{info.order_amount}}</span></p>

        </div>
        <p class="p_foot">如果收到的商品出现质量、错发、漏发等问题可申请售后退款</p>
    </div>
</template>
<script>

    export default {
        name:'successfulTrade',
		data(){
            return{
                info:'',
				mode:'order_info_paid',
				order_id:this.$route.query.order_id,
			
            }
        },
		mounted:function(){
			//初始化
			this.getItems(this.mode,this.order_id);
		
        },
        methods:{
			getItems:function(mode,order_id){
				if(!order_id || order_id == 0){
					alert('ID异常');
					window.history.go(-1);
				}

                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Users.php?mode='+mode+'&order_id='+order_id;
                let Data = this.GLOBAL.dataParam();
                
                this.$ajax.post(url,Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        this.info = temp.data;
                    }else{
                        this.GLOBAL.center_error(this,temp);        
                    }  
                })  
			},
            getSuccessfulTrade:function(){
                window.history.go(-1)
            }
        }

    }
</script>
<style>
    .p_foot{
        width:100%;
        height:1rem;
        background:#f5f4f2;
        color:#333;
        font-size:0.2rem;
        line-height:1rem;
        text-align:center;
    }
    .successfulTrade_trade p:nth-of-type(6) span{
        width:2.12rem;
        display:block;
        height:0.61rem;
        line-height:0.61rem;
        text-align:center;
        color:#fea756;
        font-size:0.24rem;
        position:absolute;
        right:0;
        top:0;
    }
    .successfulTrade_trade p:nth-of-type(4) span{
        display:block;
        width:0.9rem;
        height:0.61rem;
        line-height:0.61rem;
        text-align:center;
        color:#494848;
        font-size:0.2rem;
        position:absolute;
        right:0;
        top:0;
    }
    .successfulTrade_trade p:nth-of-type(5) span{
        display:block;
        width:0.9rem;
        height:0.61rem;
        line-height:0.61rem;
        text-align:center;
        color:#494848;
        font-size:0.2rem;
        position:absolute;
        right:0;
        top:0;
    }
    .successfulTrade_trade p:nth-of-type(1) span{
        display:block;
        width:1.17rem;
        height:0.61rem;
        line-height:0.61rem;
        text-align:center;
        color:#494848;
        position:absolute;
        right:0;
        top:0;
    }
    .successfulTrade_trade p:nth-of-type(2) span time{
        color:#a8a8a8;
    }
    .successfulTrade_trade p:nth-of-type(2) span{
        display:block;
        width:1.52rem;
        height:0.61rem;
        color:#fea756;
        font-size:0.15rem;
        line-height:0.61rem;
        text-align:center;
        position:absolute;
        right:0;
        top:0;
    }
    .successfulTrade_trade p:nth-of-type(3) span time{
        color:#a8a8a8;
    }
    .successfulTrade_trade p:nth-of-type(3) span{
        display:block;
        width:1.25rem;
        height:0.61rem;
        color:#494848;
        font-size:0.15rem;
        line-height:0.61rem;
        text-align:center;
        position:absolute;
        right:0;
        top:0;
    }
    .successfulTrade_trade p:nth-of-type(2) img{
        display:block;
        width:0.25rem;
        height:0.27rem;
        position:absolute;
        top:0.18rem;
        left:0.25rem;
    }
    .successfulTrade_trade p:nth-of-type(2){
        text-indent: 0.5rem;
    }
    .successfulTrade_trade p{
        width:100%;
        height:0.61rem;
        line-height:0.61rem;
        color:#494848;
        font-size:0.21rem;
        border-bottom:1px solid #d2d1cf;
        text-indent: 0.25rem;
        position:relative;
    }
    .successfulTrade_trade{
        width:100%;
        height:3.66rem;
    }
    .successfulTrade_idea p:first-of-type{
        position:relative;
    }
    .successfulTrade_idea p:first-of-type span{
        display:block;
        width:0.66rem;
        height:0.32rem;
        border:1px solid #868686;
        color:#777777;
        font-size:0.2rem;
        line-height:0.32rem;
        text-indent: 0.1rem;
        position:absolute;
        top:0.15rem;
        right:0.25rem;
        border-radius:0.2rem;
    }
    .successfulTrade_idea p{
        width:100%;
        height:0.6rem;
        color:#b4b4b4;
        font-size:0.2rem;
        line-height:0.6rem;
        text-indent: 0.25rem;
        border-bottom:1px solid #dedddc;
    }
    .successfulTrade_idea p:last-of-type{
        border:0;
    }
    .successfulTrade_idea{
        width:100%;
        height:3.07rem;
    }
    .successfulTrade_list span{
        display:block;
        width:0.72rem;
        height:0.24rem;
        line-height:0.24rem;
        text-align:center;
        color:#000000;
        font-size:0.2rem;
        top:0.45rem;
        right:0.27rem;
        position:absolute;
    }
    .successfulTrade_list span time{
        color:#cfcecd;
    }
    .successfulTrade_list ul{
        width:5.45rem;
        height:0.75rem;
        display:flex;
        margin-left:0.1rem;
    }
    .successfulTrade_list ul li{
        height:0.75rem;
        width:0.76rem;
        margin:0 0.05rem;
		list-style: none;
    }
    .successfulTrade_list ul li img{
        height:0.75rem;
        width:0.76rem;
    }
    .successfulTrade_list{
        width:100%;
        height:1.09rem;
        border-bottom:1px solid #cfcecd;
        position:relative;
    }
    .successfulTrade_good{
        width:100%;
        height:0.59rem;
        border-bottom:1px solid #cfcecd;
        line-height:0.59rem;
        color:#757575;
        font-size:0.23rem;
        text-indent: 0.25rem;
    }
    .successfulTrade_p{
        width:100%;
        height:0.14rem;
        background:#f5f4f2;
    }
    .successfulTrade_top h3{
        width:100%;
        height:0.79rem;
        line-height:0.79rem;
        text-align:center;
        color:#85a45a;
        font-size:0.28rem;
    }
    .successfulTrade_top img{
        display:block;
        position:absolute;
        height:0.37rem;
        width:0.31rem;
        left:0.27rem;
        top:0.25rem;
    }
    .successfulTrade_top{
        width:100%;
        height:0.79rem;
        border-bottom:1px solid #cfcecd;
        position:relative;
    }

</style>
